<template>
  <div class="huoDongDuiBi-page">
    <div class="top-tools">
      <h3>本学期与上学期活动数量对比</h3>
    </div>
    <div id="huoDongDuiBi"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      data: [
        { name: "第1月", value: 11, title: "上学期活动数" },
        { name: "第2月", value: 14, title: "上学期活动数" },
        { name: "第3月", value: 41, title: "上学期活动数" },
        { name: "第4月", value: 2, title: "上学期活动数" },
        { name: "第5月", value: 0, title: "上学期活动数" },

        { name: "第1月", value: 2, title: "本学期活动数" },
        { name: "第2月", value: 6, title: "本学期活动数" },
        { name: "第3月", value: 43, title: "本学期活动数" },
        { name: "第4月", value: 17, title: "本学期活动数" },
        { name: "第5月", value: 2, title: "本学期活动数" },

       
      ]
    };
  },
  methods: {
    createChart() {
      const chart = new Chart({
        container: "huoDongDuiBi",
        autoFit: true,
        height: 370
      });

      chart.data(this.data);
      chart.scale("name", {
        type: "cat"
      });
      chart.scale("value", {
        nice: true
      });
    chart.axis('name',{
        label:{
            style:{
                fill:'#fff',
                fontSize:14
            }
        }
    })
     chart.axis('value',{
        label:{
            style:{
                fill:'#fff'
            }
        }
    })
    chart.legend({
        itemName:{
            style:{
                fill:'#fff',
                fontSize:16,
                lineHeight:18
            }
        },
        marker:{
            style:{
                r:8
            }
        }
    })
    chart.tooltip({
        showCrosshairs: true,
        shared: true
      });
        
      chart
        .area()
        .position("name*value")
        .shape("smooth")
        .color("title",['#FF5DE4','#00FFEE'])
      chart
        .line()
        .shape("smooth")
        .position("name*value")
        .color("title",['#FF5DE4','#00FFEE'])

      chart
        .point()
        .position("name*value")
        .color("title",['#FF5DE4','#00FFEE'])
        
        .shape("circle");

      chart.interaction("element-highlight");

      chart.render();
    }
  },
  mounted() {
    this.createChart();
  }
};
</script>

<style lang="scss" scoped>
.huoDongDuiBi-page {
  padding: 12px 20px;
  box-sizing: border-box;
  .top-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 16px;
      height: 16px;
      line-height: 16px;
      padding-left: 10px;
      border-left: 4px solid #00ffee;
      margin-bottom: 20px;
    }
  }
}
</style>